<template>
    <div>
        <transition name="fade">
            <div class="style-1">
                <div class="course_common_box">
                    <div class="course-content">
                        <div class="title">
                            {{contentInfo.contentTitle}}
                        </div>
                        <div class="content">
                            <div class="picture">
                                <div class="picture-item" v-if="contentInfo.images&&contentInfo.images.length"
                                     v-for="item in contentInfo.images">
                                    <loadingImage :src="addPrefixHost(item)"/>
                                </div>
                            </div>
                            <div class="container-video" :class="LEVEL_STYLE[parseInt(content.lessons.levelId)-1]">
                                <video :src="addPrefixHost(contentInfo.video)" ref="video" controls="controls"
                                       @click="videoControl">
                                </video>
                            </div>
                        </div>
                        <div class="link">
                            <p class="explain" v-for="item in contentInfo.sentence">{{item}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!--<transition name="fade">-->
        <!--<div class="style-2" v-if="templateStyle ==='style-2'">-->
        <!--<div class="course_common_box">-->
        <!--<div class="course-content">-->
        <!--<div class="title">-->
        <!--{{contentInfo.sentence}}-->
        <!--</div>-->
        <!--<div class="picture" v-for="item in contentInfo.image">-->
        <!--<loadingImage :src="addPrefixHost(item)"/>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</transition>-->
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import loadingImage from '~/components/loadingImage';

    export default {
        async fetch({store, params, isServer, redirect}) {
            (isServer || !params) && redirect("/learner/myCourse");
            params.extendData || await store.dispatch("index/course/index/setContentInfo", params);
        },
        asyncData({params}) {
            return {extendData: params.extendData}
        }, data() {
            return {
                LEVEL_STYLE: [
                    'l1-video-bg',
                    'l2-video-bg',
                    'l3-video-bg',
                    'l4-video-bg'
                ]
            }
        },
        methods: {
            videoControl: function () {
                if (this.$refs.video.paused) {
                    this.$refs.video.play();
                } else {
                    this.$refs.video.pause();
                }
            },
            ...mapActions('index/course/index', [
                'setAnswer'
            ]),
        },
        created() {
        },
        computed: {
            contentInfo() {
                return this.courseExtendInfo || this.extendData || this.contentData;
            },
            ...mapState('index/course/index', {
                courseExtendInfo: state => state.courseExtendInfo,
                contentData: state => state.contentInfo.content,
                templateStyle: state => state.templateStyle,
                content: state => state.contentInfo,
            }),
        },
        components: {
            loadingImage
        }
    }
</script>

<style lang="less" scoped>
    .style-1 {

        .course_common_box {
            text-align: center;
            .content {
                display: block;
                position: relative;
            }
            .picture {
                position: absolute;
                right: 80%;
                top: 50%;
                transform: translate(0, -50%);
                .picture-item {
                    img {
                        max-width: 200px;
                        max-height: 200px;
                        border-radius: 5px;
                    }
                }
            }
            .title {
                text-align: left;
                display: inline-block;
                vertical-align: middle;
                font-size: 25px;
                font-weight: 800;
            }
            .l1-video-bg {
                width: 6.1rem;
                height: 4rem;
                margin: 0 auto;
                background: url("~~assets/img/main_content/course/lv1-video-bg.png") center center no-repeat;
                background-size: contain;
                video {
                    width: 76%;
                    height: 70%;
                    margin-left: 0.06rem;
                    margin-top: .63rem;
                    cursor: pointer;
                    -o-object-fit: fill;
                    object-fit: fill;
                    border-radius: 0.07rem;
                }
            }
            .l2-video-bg {
                width: 5rem;
                height: 3.2rem;
                margin: 0 auto;
                background: url("~~assets/img/main_content/course/lv2-video-bg.png") center center no-repeat;
                background-size: contain;
                video {
                    width: 88%;
                    height: 88%;
                    /* margin-top: .2rem; */
                    margin: .2rem 0 0 .02rem;
                    cursor: pointer;
                    -o-object-fit: fill;
                    object-fit: fill;
                }
            }
            .l3-video-bg {
                width: 5rem;
                height: 3.2rem;
                margin: 0 auto;
                background: url("~~assets/img/main_content/course/lv3-video-bg.png") center center no-repeat;
                background-size: contain;
                video {
                    width: 75%;
                    height: 72%;
                    margin-top: .52rem;
                    cursor: pointer;
                    object-fit: fill;
                }
            }
            .l4-video-bg {
                width: 6.1rem;
                height: 4rem;
                margin: 0 auto;
                background: url("~~assets/img/main_content/course/lv4-video-bg.png") center center no-repeat;
                background-size: contain;
                video {
                    width: 71%;
                    height: 66%;
                    margin-left: 0.44rem;
                    margin-top: .75rem;
                    cursor: pointer;
                    -o-object-fit: fill;
                    object-fit: fill;
                }
            }
            .link {
                max-width: 850px;
                display: inline-block;
                vertical-align: middle;
                text-align: left;
            }

        }

    }

</style>
